<!DOCTYPE html>
<html>
  <head>
    <!-- http://konvajs-doc.bluehymn.com/docs/sandbox/Image_Resize.html -->
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Resize Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;
      let data =[10,10, 10,100, 100,100 ,100,10]
      function update(activeAnchor) {
        var group = activeAnchor.getParent();
        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('Image')[0];
        var line = group.get('Line')[0];
       
        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();
        console.log('topLeft', topLeft.attrs)
        console.log('anchorX', anchorX)
        console.log('anchorY', anchorY)
        // let data =[10,10, 10,100, 100,100 ,100,10]
        if(true){
          switch (activeAnchor.getName()) {
          case 'topLeft':
            topRight.y(anchorY);
            bottomLeft.x(anchorX);
            break;
          case 'topRight':
            topLeft.y(anchorY);
            bottomRight.x(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.y(anchorY);
            topRight.x(anchorX);
            break;
          case 'bottomLeft':
            bottomRight.y(anchorY);
            topLeft.x(anchorX);
            break;
        }
        }
    
        let data=  [topLeft.attrs.x,topLeft.attrs.y,
        topRight.attrs.x,topRight.attrs.y,
        bottomRight.attrs.x,bottomRight.attrs.y,
        bottomLeft.attrs.x,bottomLeft.attrs.y,]
        line.points(data)
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
          x: x,
          y: y,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 1,
          radius: 8,
          name: name,
          draggable: true,
          dragOnTop: false
        });

        anchor.on('dragmove', function() {
          update(this);
          layer.draw();
        });
        anchor.on('mousedown touchstart', function() {
          group.draggable(false);
          this.moveToTop();
        });
        anchor.on('dragend', function() {
          group.draggable(true);
          layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function() {
          var layer = this.getLayer();
          document.body.style.cursor = 'pointer';
          this.strokeWidth(4);
          layer.draw();
        });
        anchor.on('mouseout', function() {
          var layer = this.getLayer();
          document.body.style.cursor = 'default';
          this.strokeWidth(2);
          layer.draw();
        });

        group.add(anchor);
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

 
      var poly = new Konva.Line({
        points: [10,10, 100,10, 100,100 ,10,100],
        stroke: 'black',
        strokeWidth: 2,
        closed:true
      });
      var darthVaderGroup = new Konva.Group({
        x: 180,
        y: 50,
        draggable: true
      });
      const textNode  = new Konva.Text({
            x: 10,
            y:  10,
            width: 200,
            text:100,
            fontSize: 20,
            draggable: true,
            name: "Text",
            fill: "red",
          });
      layer.add(darthVaderGroup);
      darthVaderGroup.add(poly);
      darthVaderGroup.add(textNode);
      addAnchor(darthVaderGroup, 10, 10, 'topLeft');
      addAnchor(darthVaderGroup, 100, 10, 'topRight');
      addAnchor(darthVaderGroup, 100, 100, 'bottomRight');
      addAnchor(darthVaderGroup, 10, 100, 'bottomLeft');
      //标签
      layer.draw();
    </script>
  </body>
</html>
